<template>
  <div class="setting-box">
    <div class="setting-item" @click="showEditPasw">
      <span>
        修改密码
      </span>
      <span>
        <van-icon name="arrow" />
      </span>
    </div>
    <van-dialog
      v-model:show="isDiaShow"
      title="修改密码"
      showCancelButton
      @confirm="updatePassword"
      @cancel="cancelEdit"
    >
      <van-field
          v-model="editPasw.oldpassword"
          placeholder="请输入原密码"
          :rules="[{ validator, message: '请输入正确内容' }]"
      />
      <van-field
          v-model="editPasw.newpassword"
          placeholder="请输入新密码，必须为6-20位数字和字母组成"
          :rules="[{ validator, message: '请输入正确内容' }]"
      />
      <van-field
          v-model="editPasw.confirmpassword"
          placeholder="请确认密码"
          :rules="[{ validator, message: '请输入正确内容' }]"
      />
    </van-dialog>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue"

const isDiaShow = ref(false)
let editPasw = reactive({
  oldpassword : '',
  newpassword : '',
  confirmpassword : ''
})

// 校验规则
const validator = (val) => /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}/.test(val)

// 显示修改密码对话框
const showEditPasw = () => {
  isDiaShow.value = true
}

// 提交修改
const updatePassword = async () => {
  // const updateRes = await
  isDiaShow.value = false
  editPasw = {
    oldpassword : '',
    newpassword : '',
    confirmpassword : ''
  }
}

// 取消修改
const cancelEdit = () => {
  editPasw = {
    oldpassword : '',
    newpassword : '',
    confirmpassword : ''
  }
}
</script>

<style scoped lang="less">
.setting-box{
  height: auto;
  padding: 10px 0;
  width: 95%;
  margin: 80px auto;
  border: 1px solid lightgray;
  box-shadow: 0 0 15px lightgray;
  border-radius: 15px;
  background-color: #fff;
  .setting-item{
    box-sizing: border-box;
    height: 80px;
    width: 95%;
    margin: 0 auto;
    border-bottom: .5px solid lightgray;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: center;
  }
}
</style>